<script setup>
import { computed, ref, onActivated } from "vue";
import { ApiAddUser, getRole } from "@/api/user";
import { toast } from "@/hook/toast";

const emits = defineEmits(['success'])

function open() {
  visible.value = true
}

const visible = ref(false)

defineExpose({
  open,
})
const formData = ref({
  name: '',
  mobile: '',
  shenfen_id: '',
  password: '',
  rpassword: '',
})
const roleOption = computed(() => {
  return roleOptions.value.map(item => ({
    label: item.rank_name,
    value: item.id
  }))
})

const roleOptions = ref([])

const formRules = computed(() => {
  return {
    name: [
      {
        required: true,
        message: '请输入员工姓名',
        trigger: 'blur'
      }
    ],
    mobile: [
      {
        required: true,
        message: '请输入员工手机号',
        trigger: 'blur'
      }
    ],
    shenfen_id: [
      {
        required: true,
        message: '请选择身份',
        trigger: 'blur'
      }
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'blur'
      }
    ],
    rpassword: [
      {
        required: true,
        message: '请再次确认密码',
      },
      {
        validator: (_, value, cb) => {
          if (!formData.value.password) return cb()
          if (!value || !value.length) return cb(new Error('请再次确认密码'))
          if (value !== formData.value.password) return cb(new Error('输入的两次密码不一致'))
          cb()
        },
        trigger: 'change'
      }
    ]
  }
})
const formRef = ref(null)

// 获取用户角色展示
async function initData() {
  // getRole
  const resp = await getRole().catch(() => {
  });
  const { code, data } = resp;
  if (code !== 1) return;
  roleOptions.value = data;
  console.log(roleOptions.value, '数据展示');
}
onActivated(() => {
  initData()
})

function cancelHandle() {
  visible.value = false
}

function addHandle() {
  formRef.value.validate(async flag => {
    if (!flag) return
    const resp = await ApiAddUser(formData.value)
    const { code, msg } = resp
    toast({
      title: msg,
      type: code === 1 ? 'success' : 'error',
    })
    if (code !== 1) return
    emits('success')
    visible.value = false
  })
}

function resetForm() {
  formRef.value.resetFields()
}
</script>

<template>
  <el-drawer v-model="visible" title="添加员工" size="500px" @closed="resetForm">
    <el-form ref="formRef" :model="formData" label-position="left" label-width="80px" :rules="formRules">
      <el-form-item label="姓名" prop="name">
        <el-input type="text" v-model="formData.name" placeholder="请输入员工姓名" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input type="number" v-model="formData.mobile" placeholder="请输入员工手机号" />
      </el-form-item>
      <el-form-item label="身份" prop="shenfen_id">
        <el-select placeholder="请选择身份" v-model="formData.shenfen_id">
          <el-option v-for="(item, index) in roleOption" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="确认密码" prop="rpassword">
        <el-input type="password" v-model="formData.rpassword" placeholder="请确认密码" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-space>
        <el-button type="info" @click="cancelHandle">取消</el-button>
        <el-button type="primary" @click="addHandle">确认添加</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss"></style>
